<template>
  <el-card style="height: 100%; position: relative">
    <template #header>
      <div class="header">
        <el-icon class="icon" size="20" @click="goBack"><ArrowLeft /></el-icon>
        <span>{{ props.isView ? '详情' : '双检政策协同处置任务' }}</span>
      </div>
    </template>
    <div class="content">
      <el-row :gutter="20" style="margin: 0; padding: 0">
        <el-col :span="8">
          <div class="info">
            <div class="info-label">任务来源</div>
            <div class="info-input">
              {{ getSource(props.detailInfo.source) }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info">
            <div class="info-label" style="width: 144px">牵头部门（单位）</div>
            <div class="info-input">
              {{ props.detailInfo.leadDeptName || '' }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info">
            <div class="info-label" style="width: 144px">责任部门（单位）</div>
            <div class="info-input">
              {{ props.detailInfo.respDeptName || '' }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info">
            <div class="info-label">风险类别</div>
            <div class="info-input">{{ props.detailInfo.riskLevel || '' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info">
            <div class="info-label">有效时间</div>
            <div class="info-input">
              {{ props.detailInfo.startTime || '' }} -
              {{ props.detailInfo.endTime || '' }}
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="info">
            <div class="info-label">处理情况</div>
            <div class="info-input">
              <el-input
                v-model="form.handleSituation"
                :rows="2"
                type="textarea"
                placeholder="请输入处理情况"
                input-style="height: 200px"
                v-if="getStatus && !props.isView"
              />
              <span v-else>
                {{ props.detailInfo.handleSituation || '' }}
              </span>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="info">
            <div class="info-label">佐证材料</div>
            <div class="info-input">
              <MBackingMaterial
                v-model="form.files"
                dateFormat="YYYY-MM-DD HH:mm"
                v-if="getStatus && !props.isView"
              />
              <PreviewFile :tableData="props.detailInfo.files" v-else />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="btns" v-if="getStatus && !props.isView && props.type === 1">
      <el-button @click="goBack">取消</el-button>
      <el-button type="primary" @click="sure"> 确定 </el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ArrowLeft, Search } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { handlerDetail, handlerHandle } from '@/api/spotCheck/spotCheck'
import PreviewFile from '@/views/spotCheck/components/previewFile/previewFile.vue'
import { ElMessage } from 'element-plus'
import { dateFormat } from '@/utils'

const router = useRouter()
const route = useRoute()

const props = defineProps(['detailInfo', 'isView', 'type'])
const emit = defineEmits(['reload'])

watch(
  () => props.detailInfo,
  (val) => {
    if (props.type === 1) {
      form.handleSituation = val.handleSituation
      if (val.files) {
        form.files = val.files.map((i) => ({
          fileSum: i.filePage,
          isSave: true,
          name: i.fileName,
          createdAt: dateFormat(i.createTime, 'YYYY-MM-DD'),
          time: i.createTime,
          timestamp: i.createTime,
          isAdd: true,
          file: [
            {
              name: i.fileName,
              status: 'success',
              url: i.fileUrl
            }
          ]
        }))
      }
    }
  }
)

const getStatus = computed(() => {
  return props.detailInfo.flowStatus === 1
})
//返回
const goBack = () => {
  router.go(-1)
}

const getSource = (v) => {
  let name = ''
  try {
    name = ['检查管理', '抽查管理', '其他'][v]
  } catch (e) {}
  return name
}

const form = reactive({
  handleSituation: '',
  files: []
})

const loadingForm = ref(false)
const sure = () => {
  let files = form.files
    .filter((i) => i.isSave)
    .map((i) => {
      let file = {
        fileName: i.name,
        filePage: i.fileSum,
        fileUrl: '',
        createTime: i?.isAdd ? i.time : i.timestamp
      }
      if (Array.isArray(i.file) && i.file.length > 0) {
        //上传了文件
        file.fileName = i.name
        file.fileUrl = i.file[0].url
      }
      return file
    })
  let data = {
    ...form,
    files,
    sorgRiskHandleId: route.query.id
  }
  loadingForm.value = true
  handlerHandle(data)
    .then((res) => {
      ElMessage.success('提交成功')
      //emit('reload')
      router.go(-1)
    })
    .finally(() => {
      loadingForm.value = false
    })
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  .icon {
    margin-right: 16px;
    cursor: pointer;
  }
  span {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }
}
.info {
  display: flex;
  margin-bottom: 20px;
  padding-top: 20px;
  .info-label {
    width: 72px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 300;
    font-size: 18px;
    color: #666666;
    margin-right: 20px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    height: 30px;
  }
  .info-input {
    flex: 1;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    line-height: 30px;
    min-width: 0;
  }
}

.upload {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.uploadListTable {
  border: 1px solid #e9e9e9;
}

:deep(.uploadListTable th) {
  background: #f5f6f8;
  font-weight: 300;
  font-size: 16px;
  color: #333333;
  height: 38px;
}
.select {
  width: 480px;
}
:deep(.el-card__body) {
  padding: 20px 0;
}
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  padding-bottom: 100px;
}
.btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #e9e9e9;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}
</style>
